<template>
  <div>
    <a-modal v-model="visible" width="648px" centered @cancel="cancel" @ok="handleOk" :body-style="{ padding: '20px' }">
      <span slot="title">
        <div class="flex_start" v-show="type === 1">
          <img src="../../../assets/img/carlock.png" style="width:18px;margin-right:6px;" />
          <div>远程锁车</div>
        </div>
        <div class="flex_start" v-show="type === 2">
          <img src="../../../assets/img/ncarlock.png" style="width:18px;margin-right:6px;" />
          <div>远程解锁</div>
        </div>
      </span>

      <a-row class="see_row">
        <a-col :span="24">
          <div class="flex_start">
            <img src="../../../assets/img/location.png" style="width:24px;margin-right:12px;" alt="" />
            <div class="address"> {{ params.address || '-' }}</div>
          </div>

        </a-col>
        <a-col :span="24">
          <span class="title-label">最后定位时间：</span>
          {{ params.addressTime || '-' }}
        </a-col>
        <a-col :span="24">
          <span class="title-label">当前使用骑手：</span>
          {{ params.memberName || '-' }}
        </a-col>
        <a-col :span="24">
          <span class="title-label">骑手手机号：</span>
          {{ numAsteriskFormat(params.mobile) || '-' }}
        </a-col>
      </a-row>

      <a-form-model layout="inline" labelAlign="right" :labelCol="{ style: 'width: 78px' }"
        :wrapperCol="{ style: 'width: 508px' }" :model="params" ref="ruleForm" :rules="rules">
        <a-row>
          <a-col :span="24" style="position: relative" v-if="type == 1">
            <a-form-model-item label="锁车原因" prop="reason" style="margin-bottom:0 !important;">
              <a-textarea :maxLength="200" rows="4" @change="changetextarea" v-model="params.reason"
                placeholder="请输入详细说明" />
              <div style="position: absolute;right:10px;bottom:-6px;color:#999999;">{{ textAreaLen }}/200</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" style="position: relative" v-if="type == 2">
            <a-form-model-item label="解锁原因" prop="reason" style="margin-bottom:0 !important;">
              <a-textarea :maxLength="200" rows="4" @change="changetextarea" v-model="params.reason"
                placeholder="请输入详细说明" />
              <div style="position: absolute;right:10px;bottom:-6px;color:#999999;">{{ textAreaLen }}/200</div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { upDateVehicleGet } from '@/services/car.js'
import { carLock } from '@/services/address'
import { numAsteriskFormat } from '@/utils/util.js'
import { unlock } from '@/services/message'

export default {
  data () {
    return {
      type: 1,
      numAsteriskFormat,
      visible: false,
      textAreaLen: 0,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      params: {},
      rules: {
        reason: [
          { required: true, message: '请输入详细说明', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    changetextarea (e) {
      this.textAreaLen = this.params.reason.length
    },
    onInitial (row, type) {
      this.type = type
      this.params = {}
      this.getList(row.vehicleId)
      // this.params = row
    },
    async getList (params) {
      const res = await upDateVehicleGet(params)
      if (res.isSuccess) {
        this.visible = true

        this.params = {
          vehicleId: res.data.vehicleId,
          address: res.data.address,
          addressTime: res.data.addressTime,
          memberName: res.data.memberName,
          mobile: res.data.mobile,
          remoteLock: 1
        }
      }
    },
    cancel () {
      this.visible = false
      this.$refs.ruleForm.resetFields()
    },
    handleOk () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.type === 1) {
            this.onSubmit()
          } else {
            this.onSubmitType()
          }
        }
      })
    },
    async onSubmit () {
      const res = await carLock(this.params)
      const { isSuccess, msg } = res
      if (isSuccess) {
        this.cancel()
        this.$emit('changes')
        this.$message.newFun('已发送远程锁车命令！', 'success', 2)
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async onSubmitType () {
      const res = await unlock(this.params)
      const { isSuccess, msg } = res
      if (isSuccess) {
        this.cancel()
        this.$emit('changes')
        this.$message.newFun('已发送解锁车辆命令！', 'success', 2)
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    }
  }
}
</script>
<style scoped>
.deliveryConfirm_title {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #032250;
  line-height: 22px;
  margin-bottom: 16px;
}

.deliveryConfirm_label {
  width: 40px;
  height: 40px;
  background: rgba(82, 132, 254, 0.2);
  border: 1px solid #5284fe;
  border-radius: 50%;
  text-align: center;
}

.deliveryConfirm_labels {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #5284fe;
  line-height: 38px;
}

.deliveryConfirm_label_shou {
  width: 40px;
  height: 40px;
  background: rgba(246, 151, 9, 0.2);
  border: 1px solid #f69709;
  border-radius: 50%;
  text-align: center;
}

.deliveryConfirm_labels_shou {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #f69709;
  line-height: 38px;
}

.goods_title_name {
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #333333;
  line-height: 20px;
}

.goods_address {
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #606266;
  line-height: 22px;
}

.margint10 {
  margin-top: 10px;
}

.address {
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #053781;
  line-height: 22px;
}
</style>
